<template>
  <div class="temp">
    <div class="center">
      <div class="el-row">
        <div class="el-col el-col-24">
          <div class="comp">
            <div class="tmpl routeanimate">
              <div class="section">
                <div class="location">
                  <span>当前位置：</span>
                  <a href="/index.html">首页</a> &gt;
                  <a href="#/site/member/center" class="">会员中心</a>&gt;
                  <a href="#/site/member/orderlist" class="router-link-exact-active ">我的订单</a>
                </div>
              </div>
              <div class="section clearfix">
                <div class="left-260">
                  <div class="bg-wrap">
                    <div class="avatar-box">
                      <a href="/user/center/avatar.html" class="img-box">
                        <i class="iconfont icon-user-full"></i>
                      </a>
                      <h3>

                        ivanyb

                      </h3>
                      <p>
                        <b>注册会员</b>
                      </p>
                    </div>
                    <div class="center-nav">
                      <ul>
                        <li>
                          <h2>
                            <i class="iconfont icon-order"></i>
                            <span>订单管理</span>
                          </h2>
                          <div class="list">
                            <p>
                              <router-link to="/site/vip/goodslist">
                                <i class="iconfont icon-arrow-right"></i>交易订单
                              </router-link>
                            </p>
                          </div>
                        </li>
                        <li>
                          <h2>
                            <i class="iconfont icon-user"></i>
                            <span>账户管理</span>
                          </h2>
                          <div class="list">
                            <p>
                              <a href="#/site/member/center" class="">
                                <i class="iconfont icon-arrow-right"></i>账户资料</a>
                            </p>
                            <p>
                              <a href="#/site/member/center" class="">
                                <i clrouter-linkss="iconfont icon-router-linkrrow-right"></i>头像设置</a>
                            </p>
                            <p>
                              <a href="#/site/member/center" class="">
                                <i class="iconfont icon-arrow-right"></i>修改密码</a>
                            </p>
                            <p>
                              <a href="javascript:void(0)">
                                <i class="iconfont icon-arrow-right"></i>退出登录</a>
                            </p>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="right-auto">
                  <div class="bg-wrap" style="min-height: 765px;">
                    <div class="sub-tit">
                      <ul>
                        <li class="selected">
                          <router-link to="/site/vip/goodslist">
                            <i class="iconfont icon-arrow-right"></i>交易订单
                          </router-link>
                        </li>
                      </ul>
                    </div>
                    <div class="table-wrap">
                      <table width="100%" border="0" cellspacing="0" cellpadding="0" class="ftable">
                        <tbody>
                          <tr>
                            <th width="16%" align="left">订单号</th>
                            <th width="10%">姓名</th>
                            <th width="12%">订单金额</th>
                            <th width="11%">下单时间</th>
                            <th width="10%">状态</th>
                            <th width="12%">操作</th>
                          </tr>

                          <tr v-for="item in goodlist" :key='item.id'>
                            <td>{{item.order_no}}</td>
                            <td align="left">{{item.accept_name}}</td>
                            <td align="left">
                              <strong style="color: red;">￥{{item.order_amount}}</strong>
                              <br> {{item.paymentTitle}}
                            </td>
                            <td align="left">{{item.add_time | timefil('YY-MM-DD HH:mm:ss')}}</td>
                            <td align="left">
                              {{item.statusName}}
                            </td>
                            <td align="left">
                              <router-link v-bind="{to:'/site/vip/goodsone/'+item.id}" > 查看订单</router-link>
                              <br>
                              <router-link v-bind="{to:'/site/pay/'+item.id}" v-if="item.status==1"> |去付款</router-link>
                              <br>
                              <a href="javascript:void(0)" v-if="item.status==1" @click='cance(item.id)'>|取消</a>
                              <br>
                            </td>
                          </tr>

                        </tbody>
                      </table>
                      <div class="page-foot">
                        <div class="flickr right">
                          <!-- 分页占位符 -->
                          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex" :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total='totalSize'>
                          </el-pagination>
                          <!-- 分页占位符/ -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                pageIndex: 1, //单前页
                pageSize: 10, //一页显示10条
                totalSize: 0, // 总共有多少条数据
                goodlist: [], //存API返回的订单数据
            }
        },
        created() {
            this.getlist();
        },
        methods: {
            handleCurrentChange(val) { //当个选中
                this.pageIndex = val;
                this.getlist();
            },
            handleSizeChange(val) { //容量选则
                this.pageSize = val;
                this.getlist();
            },
            cance(orderID) { //未付款取消订单
                var url = '/site/validate/order/cancelorder/' + orderID;
                this.$http.get(url).then(res => {
                    if (res.data.status == 1) {
                        return this.$message.error(res.data.message);
                    }
                    // 成功
                    this.$message.success(res.data.message);
                    this.getlist();
                })
            },
            getlist() { //获取订单数据渲染
                var url = '/site/validate/order/userorderlist?pageIndex=' + this.pageIndex + '&pageSize=' + this.pageSize + '';
                this.$http.get(url).then(res => {
                    if (res.data.status == 1) {
                        return this.$messaga.error(res.data.message);
                    }
                    // 成功
                    this.totalSize = res.data.totalcount; //总条数数据
                    this.goodlist = res.data.message;
                })
            }
        }
    }
</script>
<style></style>